<template>
    <div>
        <h1>全局状态管理</h1>
        <p>{{$store.state.msg}} | {{$store.state.n}}</p>
        <button @click="changeN(5)">修改n</button>
        <h1>vue3的组件</h1>
        <!-- 监听input事件，用事件的值$event更新当前组件num的值 -->
        <step-com :num="num" @input="num=$event"   ref="step"></step-com>
        <br>
         <step-com ></step-com>
         <button @click="check()">父组件的按钮</button>

         <div :style="{width:num+'px',height:num+'px',border:'1px solid red'}">

         </div>
         <button @click="goPage()">切换到about页面</button>
        
    </div>
</template>
<script setup>
import StepCom from '@/components/StepCom.vue';
// 组件传参，父传子 props
import {ref} from 'vue';
// useRouter获取到整个路由信息
// useRoute当前路由信息
import { useRouter,useRoute } from 'vue-router';
// 使用全局状态仓库
import {useStore} from 'vuex'
const $store = useStore();
const num = ref(10)
// 定义dom引用，引用的是组件
const step = ref();

function check(){
    // step.value就是stepper组件
    console.log(step.value);
    step.value.add(15);
    alert(step.value.count);
}
var $router = useRouter();
var $route = useRoute ();
function goPage(){
    console.log("当前路由信息",$route);
    $router.push("/about");
    
}
function changeN(data){
    $store.commit("SETN",data);
}

</script>
 